<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main">
		<div class="shadow">
			<div>
				<h4>背景background</h4>
				<pre>
	.bab{
		width: 500px;
		height: 500px;
		/*overflow: auto;  超出部分以滚动条显示*/
		/*background: skyblue;*/
		/*background-image: linear-gradient(to right red,blue);*/
		border: 5px solid black;
		background-image: linear-gradient(88deg,red,blue);
		/*背景图的平铺方式*/
		/*background-repeat:no-repeat ;*/
		/*background-repeat-x: no-repeat;*/
		/*background-repeat-y: no-repeat;*/
		/*背景图位置
		background-position-x: left/center/right;
		background-position-x: 100px;          (以左上角为起点)
		background-position-y: top/center/bottom;
		background-position-y: 80%;
		background-position: 50% 30%;
		背景图尺寸 background-size: auto(默认图像的尺寸);*/
		/*background-size: 100px;*/
		/*固定值:按照固定值进行拉伸*/
		/*background-size: 100%;*/
		/*百分比:根据父容器的宽高,进行拉伸*/
		/*background-size: contain;(以容器的最小为标准,保证图像完整显示)*/
		/*background-size: cover;*/
		/*cover 铺满,强制将图片铺满整个容器,无法显示整张图片*/
		
		background-origin ： border-box | padding-box | content-box;
		<div class="background">
			<img src="img/backgrond01.jpg" alt="">
		</div>
		<style type="text/css">
			.background{
				margin-left: 2em;
				width:200px;
				height: 300px;
			}
		</style>
		background-clip ： border-box | padding-box | content-box | text
		<div class="background">
			<img src="img/backgrond02.jpg" alt="">
		</div>
	}				
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>